<template>
  <div class="upload-content">
    <Steps :current="step" class="step">
      <Step :title="title1" :content="$t('select_file')"></Step>
      <Step :title="title2" :content="$t('begin_upload')"></Step>
      <Step :title="title3" :content="$t('upload_finished')"></Step>
    </Steps>
    <div class="model-step1" v-show="stepShow1">
      <Form :model="form1" label-position="right" :label-width="100">
        <FormItem :label="$t('organization')" prop="organization">
          <Orgselect ref="srhOrgSelect" ></Orgselect>
<!--          <Input type="text" v-model="form1.organization" placeholder="请选择组织机构">-->
<!--            <Icon type="ios-person-outline" slot="prepend"></Icon>-->
        </FormItem>
        <FormItem :label="$t('storage_server')" prop="site">
          <SiteSelect ref="srhSiteSelect" v-model="form1.siteId"></SiteSelect>
          <!--          <Input type="text" v-model="form1.organization" placeholder="请选择组织机构">-->
          <!--            <Icon type="ios-person-outline" slot="prepend"></Icon>-->
        </FormItem>

        <FormItem :label="$t('personnel')" prop="police">
          <UserSelect ref="srhUserSelect" v-model="form1.userId"  v-bind:srhValue="form1.userName" width="200px"/>
<!--          <Input type="text" v-model="form1.policeCode" placeholder="请选择人员">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>-->
        </FormItem>
        <FormItem :label="$t('shooting_time')" prop="createTime">
<!--          <Input type="text" v-model="form1.createTime" placeholder="请选择时间">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>-->
          <DatePicker type="datetime" :placeholder="$t('datetime')" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem :label="$t('trade_code')" >
          <Input type="text" v-model="form1.caseCode" :placeholder="$t('trade_code')">
<!--            <Icon type="ios-lock-outline" slot="prepend"></Icon>-->
          </Input>
        </FormItem>
        <FormItem :label="$t('description')" prop="note">

          <Input type="textarea" maxlength="250" show-word-limit v-model="form1.note" :placeholder="$t('description')">
<!--            <Icon type="ios-lock-outline" slot="prepend"></Icon>-->
          </Input>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleForm1Submit()">{{$t('next')}}</Button>
        </FormItem>
      </Form>
    </div>
    <div class="model-step2" v-show="stepShow2">
      <Form :model="form2">
<!--        <FormItem prop="user">
          <Input type="text" v-model="formUpdate.account" placeholder="请输入账号">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formUpdate.password" placeholder="请输入密码">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="formUpdate.confirm" placeholder="请确认密码">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>-->
        <FormItem><upload></upload></FormItem>
        <FormItem>
          <div class="progress" id="progressHide">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60"
                 aria-valuemin="0" aria-valuemax="100" style="width: 0%;" id="progressBar">
              <span class="sr-only">0%</span>
            </div>
          </div>
        </FormItem>


        <FormItem>
          <Button type="primary" @click="step1">{{$t('back')}}</Button>
          <Button type="primary" style="margin-left: 5px" @click="handleForm2Submit">{{$t('start')}}</Button>
        </FormItem>
      </Form>
    </div>
    <div class="model-finish" v-show="stepShow3">
      <Icon type="md-checkmark-circle" class="icon" />
      {{$t('finish')}}
    </div>
  </div>
</template>

<script>
import {changePaasword} from '@/api/user'
import {login,logout} from '@/api/login'
import Orgselect from '@/components/topnav/OrgSelect.vue';
import UserSelect from "_c/topnav/UserModelSelect";
import SiteSelect from "@/components/topnav/SiteSelect.vue";
import Upload from './Upload.vue'
export default {
  name: 'Login',
  components:{Orgselect,UserSelect,Upload,SiteSelect},
  data () {
    return {
      form1: {
        organization: '',
        policeCode: '',
        createTime: null,
        note:null,
        caseCode: null,
        userId: null,
        userName: null,
      },
      form2: {
        account: '',
        password: '',
        confirm: ''
      },
      stepShow1: true,
      stepShow2: false,
      stepShow3: false,
      step: 0,
      title1: '',
      title2: '',
      title3: '',

      param:{
        caseCode: null, //警情案件编号
        policeCode: null,//人员编号（警号）
        loginCode: null,//当前登录用户编号
        createTime: null,//拍摄时间
        comments: null //备注内容

      }

    }
  },
  methods: {
    handleForm1Submit () {
      this.step2();
    },
    handleForm2Submit () {
      this.step3();
    },
    step1 () {
      this.stepShow1 = true
      this.stepShow2 = false
      this.stepShow3 = false
      this.step = 0
      this.title1 = this.$t('step_state_underway')
      this.title2 = this.$t('step_state_unfinished')
      this.title3 = this.$t('step_state_unfinished')
    },
    step2 () {
      this.stepShow1 = false
      this.stepShow2 = true
      this.stepShow3 = false
      this.step = 1
      this.title1 = this.$t('step_state_finished')
      this.title2 = this.$t('step_state_underway')
      this.title3 = this.$t('step_state_unfinished')
    },
    step3 () {
      this.stepShow1 = false
      this.stepShow2 = false
      this.stepShow3 = true
      this.step = 2
      this.title1 = this.$t('step_state_finished')
      this.title2 = this.$t('step_state_finished')
      this.title3 = this.$t('step_state_finished')
    }
  },
  mounted () {
    this.step1()
  }
}
</script>

<style lang="less">
//@import './ChangePassword.less';
.upload-content {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 20px;
  .step {
    width: 500px;
    height: 50px;
    margin-left: 20px;
  }
  .model-step1 {
    width: 480px;
    height: 100%;
    margin: 80px auto 0;
  }
  .model-step2 {
    width: 400px;
    height: 100%;
    margin: 50px auto 0;
  }
  .model-finish {
    width: 300px;
    height: 100%;
    margin: 100px auto 0;
    color: green;
    font-size: 30px;
    .icon {
      font-size: 80px;
    }
  }

  /** 进度条*/
  .progress {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
    background: #dadada;
    height: 18px;
    .progress-bar {
      box-shadow: none;
      line-height: 18px;
      float: left;
      height: 100%;
      font-size: 12px;
      color: #fff;
      text-align: center;
      transition: width .6s ease;
    }
    .progress-bar-success {
      background-color: #59a84b;
    }
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
}

</style>
